<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>差异SQL</title>
		
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
		<script src="js/element-ui/lib/index.js"></script>
		<script src="js/axios.js"></script>
		
		<link rel="stylesheet" href="css/common.css">
	</head>
	<body>
		<div id="app">
			<div class="header-panel" v-loading.fullscreen.lock="loading" v-cloak>
				<div></div>
				<div><h2>{{title}}</h2></div>
				<div style="color: red;">温馨提示：仅供参考，使用前请检查</div>
			</div>
			<div class="container">
				<pre v-for="item in sqlList"><code class="language-sql" style="word-wrap:break-word; white-space: pre-wrap;">{{item}}</code></pre>
			</div>
			<iframe src="component/footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
		</div>
		<script src="js/utils.js"></script>
		<link rel="stylesheet" href="js/highlight/vs.min.css">
		<!-- highlight.min.js仅下载了sql语言的 -->
		<script src="js/highlight/highlight.min.js"></script>
		<script>
			let that = new Vue({
				el: '#app',
				data: function () {
					return {
						title:"修正XXX数据库的SQL",
						loading: true,
						sqlList:[],
					}
				},
				methods: {
					getSql(type, changeKey, targetKey, tableName, fieldName){
						axios.get(`${baseUrl}/api/getSql?type=${type}&changeKey=${changeKey}&targetKey=${targetKey}&tableName=${tableName}&fieldName=${fieldName}`).then(response => {
							console.log(response.data);
							if (response.data.code == 200) {
								let result = response.data.result;
								this.sqlList = result;
								this.$nextTick(()=>{
									// 高亮sql语句
									hljs.highlightAll();
								})
							} else {
								this.$alert(response.data.msg, '操作失败', {
									confirmButtonText: '确定',
									callback: action => {}
								});
							}
						}).catch(error => {
							console.log(error);
						}).finally(() => {
							this.loading = false;
						})
					},
					setTitle(key){
						axios.get(`${baseUrl}/api/list`).then(response => {
							let tableData = response.data.result;
							let res = tableData.filter((obj) => {
							  return obj.key == key;
							});
							this.title = this.title.replace("XXX", res[0].name);
							// document.title = this.title;
						}).catch(error => {
							console.log(error);
						})
					},
				},
				mounted() {
					let type = getUrlParam("type");
					let changeKey = getUrlParam("changeKey");
					let targetKey = getUrlParam("targetKey");
					let tableName = getUrlParam("tableName");
					let fieldName = getUrlParam("fieldName");
					this.getSql(type, changeKey, targetKey, tableName, fieldName);
					this.setTitle(targetKey);
				}
			})
		</script>
	</body>
</html>
